﻿
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HTML Table导出CSV电子表格 www.bootstrapmb.com</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .container {
            margin: 150px auto;
            max-width: 640px;
        }
    </style>
</head>

<body>
<!--
<section >
    <div class="container" style="padding:30px 0">
        <div class="row">
            <div class="md-col-8">
                <div class="table2excel" >
                    <table class="table table-striped table-bordered table-hover" id="table2html">
                    </table>
                </div>
            </div>
        </div>
        <button id="btn" class="btn btn-primary">生成excel</button>
    </div>
</section>-->
     
   <div class="container">
        
        <button class="btn btn-danger mb-3" onclick="table2csv(this,1)" data-table="example">下载表格</button>

        <table class="table table-bordered table-striped" id="example">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>

        <table class="table">
            <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
<button>导出EXCEL</button>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script src="https://github.com/rainabba/jquery-table2excel"></script>
<script>
    $('button').click(function(){
        console.log(1)
        $("#datatable").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    })


    //      table2excel插件的可用配置参数有：
    //
    //            exclude：不被导出的表格行的CSS class类。
    //            name：导出的Excel文档的名称。
    //            filename：Excel文件的名称。
    //            exclude_img：是否导出图片。
    //            exclude_links：是否导出超链接
    //            exclude_inputs：是否导出输入框中的内容。

</script>
<script src="./js/table2csv.min.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <!--<script src="js/jquery.table2excel.js"></script>-->
    <script src="js/jquery.table2excel.min.js"></script>
<script src="js/jquery.table2excel.js"></script>
    <script src="https://github.com/rainabba/jquery-table2excel/blob/243fa8505fc60304662551fc4abc52853eb4ddad/dist/jquery.table2excel.js"></script>
</body>
</html>
